<template>
    <div class="wrapper wrapper5">
        <div class="page-header">
            <h3>{{ title }}</h3>
        </div>
        <div class="page-content">
            <Alert v-if="total == 0" message="没有数据" />
            <ul v-else class="list-group">
                <li class="list-group-item" v-for="item in list" :key="item">
                    {{ item }}
                </li>
            </ul>
            <button class="btn btn-primary" @click="addData">
                增加一条数据
            </button>
        </div>
    </div>
</template>

<script setup>
import { defineProps, ref, computed } from "vue";
const props = defineProps({
    title: {
        type: String,
        default: "Dashboard",
    },
});

const list = ref([]);
const total = computed(() => list.value.length);

// 增加数据
const addData = () => {
    list.value.push(Math.floor(Math.random() * 100000));
};
</script>

<style lang="scss" scoped></style>
